<template>
  <preview-wrapper :page-id="pageId" @closePreview="closePreview">
    <v-card :elevation="0">
      <v-card-title class="text-h5 grey lighten-2">
        页面基础设置
      </v-card-title>
      <v-card-text>
        <div class="preview-info-wrapper pa-5">
          <div class="page-info">
            <div class="page-cover">
              <image-cropper :url.sync="pageData.coverImage" />
            </div>
            <div class="page-title-des">
              <div class="info-form-wrapper">
                <v-text-field
                  v-model="pageData.title"
                  label="标题："
                />
              </div>
              <div class="info-form-wrapper">
                <v-textarea
                  v-model="pageData.description"
                  label="描述："
                  outlined
                  height="100"
                />
              </div>
            </div>
          </div>
          <!--分享样式-->
          <div class="info-form-wrapper">
            <v-switch
              v-model="pageData.shareConfig.shareWx"
              label="设置微信分享样式"
            />
          </div>
          <v-expand-transition>
            <div v-show="pageData.shareConfig.shareWx" class="share-wx-config-wrapper marginB30">
              <div class="info-form-r page-info">
                <div class="page-cover">
                  <image-cropper :url.sync="pageData.shareConfig.coverImage" />
                </div>
                <div class="page-title-des">
                  <div class="info-form-wrapper">
                    <v-text-field
                      v-model="pageData.shareConfig.title"
                      label="分享标题："
                    />
                  </div>
                  <div class="info-form-wrapper">
                    <v-textarea
                      v-model="pageData.shareConfig.description"
                      label="分享描述："
                      outlined
                      height="100"
                    />
                  </div>
                </div>
              </div>
            </div>
          </v-expand-transition>
          <!--翻页方式-->
          <div class="info-form-wrapper mt-5">
            <div class="info-form-l com-width">翻页方式：</div>
            <div class="info-form-r">
              <v-radio-group
                v-model="pageData.flipType"
                row
              >
                <v-radio
                  label="上下翻页"
                  value="0"
                />
                <v-radio
                  label="左右翻页"
                  value="1"
                />
                <v-radio
                  label="翻书效果"
                  value="2"
                />
              </v-radio-group>
            </div>
          </div>
          <!--翻页方式-->
          <div class="info-form-wrapper">
            <v-switch
              v-model="pageData.slideNumber"
              label="显示页码"
            />
          </div>
          <!--作品访问状态-->
          <div class="info-form-wrapper">
            <v-switch
              v-model="pageData.status"
              label="是否允许访问"
              false-value="0"
              true-value="1"
            />
          </div>
        </div>
      </v-card-text>
      <v-card-actions class="pa-5">
        <v-btn color="primary" @click="publishFn">保存并发布</v-btn>
        <v-btn @click="saveFn">保 存</v-btn>
        <v-btn @click="closePreview">保 存</v-btn>
      </v-card-actions>
    </v-card>
  </preview-wrapper>
</template>

<script>
import PreviewWrapper from './preview-wrapper'
import ImageCropper from './image-cropper'

export default {
  components: {
    PreviewWrapper,
    ImageCropper
  },
  props: {
    pageId: {
      type: String,
      default: ''
    },
    pageData: {
      type: Object,
      require: true,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {}
  },
  methods: {
    /**
     * 关闭弹窗事件
     */
    closePreview() {
      this.$emit('closePreview', false)
    },
    publishFn() {
      this.$emit('publishFn')
    },
    saveFn() {
      this.$emit('saveFn')
    }
  }
}
</script>

<style lang="scss" scoped>
  .preview-info-wrapper {
    padding: 30px 30px 60px;
  }
  .page-info {
    display: flex;
    .page-cover {
      width: 120px;
      height: 120px;
      overflow: hidden;
    }
    .page-title-des {
      padding-left: 20px;
      flex: 1;
    }
  }
  .info-form-wrapper {
    display: flex;
    padding-bottom: 16px;
    .info-form-l {
      line-height: 66px;
      &.com-width {
        width: 120px;
      }
    }
    .info-form-r {
      flex: 1;
      padding-left: 10px;
    }
  }
  .share-wx-config-wrapper {
    margin-top: 14px;
    padding: 12px;
    background-color: #f0f3f4;
  }
</style>
